<template>
  <el-form ref="form" :model="form" :rules="formRules" style="margin-top: 20px" label-position="top">
    <el-form-item label="Who Is A Good Fit For This Group?" prop="goodFit">
      <el-input type="textarea" resize="none" placeholder="Please enter" :autosize="{ minRows: 3, maxRows: 6}" v-model="form.goodFit"></el-input>
    </el-form-item>
    <el-form-item label="Mission">
      <el-input type="textarea" resize="none" placeholder="Please enter" :autosize="{ minRows: 3, maxRows: 6}" v-model="form.mission"></el-input>
    </el-form-item>
    <el-form-item label="Rules">
      <el-input type="textarea" resize="none" placeholder="Please enter" :autosize="{ minRows: 3, maxRows: 6}" v-model="form.rules"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'newGroupStep2',
  props: ['form'],
  data () {
    return {
      formRules: {
        // goodFit: [
        //   { required: true, message: 'Please Enter', trigger: 'blur' }
        // ]
      }
    }
  },
  watch: {
    form (val) {
      this.$emit('update:form', val)
    }
  },
  methods: {
    async submitForm () {
      return this.$refs['form'].validate()
    }
  }
}
</script>

<style scoped>
::v-deep .el-form-item__label{
  font-weight: bold;
}
</style>
